<template>
  <div class="interview-room-container">
    <div class="room-header">
      <div class="company-info">
        <h2>{{ interview.company }}</h2>
        <div class="position">{{ interview.position }}</div>
      </div>
      <div class="controls">
        <el-button type="danger" @click="exitInterview">结束面试</el-button>
      </div>
    </div>
    
    <div class="room-content">
      <div class="video-section">
        <div class="video-container main-video">
          <div class="video-placeholder interviewer">
            <el-avatar :size="64" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            <div class="name">面试官</div>
          </div>
        </div>
        <div class="video-container self-video">
          <div class="video-placeholder self">
            <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <div class="name">我</div>
          </div>
        </div>
      </div>
      
      <div class="qa-section">
        <div class="question-list">
          <h3>面试问题</h3>
          <el-timeline>
            <el-timeline-item
              v-for="(question, index) in questions"
              :key="index"
              :type="currentQuestionIndex === index ? 'primary' : ''"
              :hollow="currentQuestionIndex !== index"
            >
              <div 
                class="question-item" 
                :class="{ 'current': currentQuestionIndex === index }"
                @click="selectQuestion(index)"
              >
                <div class="question-content">{{ question.content }}</div>
                <div v-if="question.answered" class="question-status">已回答</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
        
        <div class="answer-area">
          <div class="current-question">
            <h3>当前问题</h3>
            <div class="question-content">
              {{ currentQuestion ? currentQuestion.content : '准备开始面试...' }}
            </div>
          </div>
          
          <div class="answer-input">
            <h3>我的回答</h3>
            <el-input
              v-model="currentAnswer"
              type="textarea"
              :rows="6"
              placeholder="在这里输入你的回答..."
              :disabled="!currentQuestion"
            />
            <div class="button-group">
              <el-button 
                type="primary" 
                @click="submitAnswer"
                :disabled="!currentQuestion || !currentAnswer.trim()"
              >
                提交回答
              </el-button>
              <el-button @click="skipQuestion" :disabled="!currentQuestion">
                跳过问题
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 退出面试确认对话框 -->
    <el-dialog
      v-model="exitDialogVisible"
      title="确认结束面试"
      width="30%"
    >
      <span>确定要结束当前面试吗？已回答的问题将被保存。</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exitDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmExit">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const exitDialogVisible = ref(false);
const currentQuestionIndex = ref(-1);
const currentAnswer = ref('');
const interviewStarted = ref(false);
const interviewEnded = ref(false);
const interviewTimer = ref(0);
let timerInterval: number | null = null;

// 模拟的面试数据
const interview = ref({
  id: 1,
  company: '阿里巴巴',
  position: 'Vue前端开发工程师',
  date: '2023-12-20',
  time: '14:00-15:00',
  duration: 60, // 分钟
});

// 模拟的问题列表
const questions = ref([
  {
    id: 1,
    content: '请介绍一下你自己以及你的技术背景',
    answered: false,
    answer: ''
  },
  {
    id: 2,
    content: '你是如何处理前端项目中的性能优化问题的？',
    answered: false,
    answer: ''
  },
  {
    id: 3,
    content: '请详细描述一下Vue的响应式原理',
    answered: false,
    answer: ''
  },
  {
    id: 4,
    content: '你在团队协作中遇到过哪些挑战，你是如何解决的？',
    answered: false,
    answer: ''
  },
  {
    id: 5,
    content: '你对前端未来的发展趋势有什么看法？',
    answered: false,
    answer: ''
  }
]);

// 当前问题
const currentQuestion = computed(() => {
  if (currentQuestionIndex.value >= 0 && currentQuestionIndex.value < questions.value.length) {
    return questions.value[currentQuestionIndex.value];
  }
  return null;
});

// 选择问题
const selectQuestion = (index: number) => {
  if (!interviewStarted.value) {
    startInterview();
  }
  
  // 如果切换问题，先保存当前回答
  if (currentQuestionIndex.value >= 0 && currentAnswer.value.trim()) {
    questions.value[currentQuestionIndex.value].answer = currentAnswer.value;
  }
  
  currentQuestionIndex.value = index;
  currentAnswer.value = questions.value[index].answer || '';
};

// 提交回答
const submitAnswer = () => {
  if (currentQuestionIndex.value >= 0) {
    questions.value[currentQuestionIndex.value].answer = currentAnswer.value;
    questions.value[currentQuestionIndex.value].answered = true;
    
    ElMessage({
      type: 'success',
      message: '回答已提交'
    });
    
    // 自动进入下一个问题
    if (currentQuestionIndex.value < questions.value.length - 1) {
      selectQuestion(currentQuestionIndex.value + 1);
    } else {
      ElMessage({
        type: 'warning',
        message: '这是最后一个问题了'
      });
    }
  }
};

// 跳过问题
const skipQuestion = () => {
  if (currentQuestionIndex.value < questions.value.length - 1) {
    selectQuestion(currentQuestionIndex.value + 1);
  } else {
    ElMessage({
      type: 'warning',
      message: '已经是最后一个问题了'
    });
  }
};

// 开始面试
const startInterview = () => {
  if (!interviewStarted.value) {
    interviewStarted.value = true;
    currentQuestionIndex.value = 0;
    
    // 开始计时
    startTimer();
    
    ElMessage({
      type: 'success',
      message: '面试已开始'
    });
  }
};

// 开始计时器
const startTimer = () => {
  if (timerInterval) return;
  
  timerInterval = window.setInterval(() => {
    interviewTimer.value += 1;
    
    // 如果达到面试时间，自动结束
    if (interviewTimer.value >= interview.value.duration * 60) {
      endInterview();
    }
  }, 1000);
};

// 停止计时器
const stopTimer = () => {
  if (timerInterval) {
    clearInterval(timerInterval);
    timerInterval = null;
  }
};

// 结束面试
const endInterview = () => {
  interviewEnded.value = true;
  stopTimer();
  
  // 保存所有回答
  const answeredQuestions = questions.value.filter(q => q.answered).length;
  
  ElMessage({
    type: 'info',
    message: `面试已结束，你回答了 ${answeredQuestions}/${questions.value.length} 个问题`
  });
  
  // 返回到待面试列表
  router.push('/pending-interviews');
};

// 退出面试
const exitInterview = () => {
  exitDialogVisible.value = true;
};

// 确认退出
const confirmExit = () => {
  exitDialogVisible.value = false;
  endInterview();
};

onMounted(() => {
  const interviewId = route.params.id;
  
  // 在实际应用中，这里应该根据ID加载面试数据
  console.log('Loading interview:', interviewId);
  
  // 自动开始第一个问题
  setTimeout(() => {
    startInterview();
  }, 1000);
});

onBeforeUnmount(() => {
  stopTimer();
});
</script>

<style scoped>
.interview-room-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-info h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.position {
  font-size: 14px;
  color: #666;
}

.room-content {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
  overflow: hidden;
}

.video-section {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-container {
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.main-video {
  flex: 1;
  min-height: 400px;
}

.self-video {
  height: 150px;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.video-placeholder .name {
  margin-top: 10px;
  font-size: 14px;
}

.video-placeholder.interviewer {
  background-color: #1a1a1a;
}

.video-placeholder.self {
  background-color: #333;
}

.qa-section {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.question-list {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  flex: 1;
  overflow-y: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.question-list h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.question-item {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.question-item:hover {
  background-color: #f5f7fa;
}

.question-item.current {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
}

.question-content {
  font-size: 14px;
  color: #333;
}

.question-status {
  font-size: 12px;
  color: #67c23a;
  margin-top: 5px;
}

.answer-area {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.current-question {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.current-question h3, .answer-input h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.answer-input {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 